{% extends 'backend/home-list.html' %}
{% load static %}
{% load mptt_tags %}
{% block cssLink %}

{% endblock %}

{% block tableItem %}
    <div class="row g-3">

        <!-- tree -->
        <div class="col-md-5 col-xl-3">
            <div class="portlet-body h-100">
                <!-- toolbar -->
                <div class="pt-3 pb-4 pt-1 border-bottom">
                    <a onclick="addFolderModal()"
                       class="ms-0 link-muted text-center folder-path">
                        <svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                             class="bi bi-folder-plus" viewBox="0 0 16 16">
                            <path d="m.5 3 .04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2zm5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19c-.24 0-.47.042-.683.12L1.5 2.98a1 1 0 0 1 1-.98h3.672z"></path>
                            <path d="M13.5 10a.5.5 0 0 1 .5.5V12h1.5a.5.5 0 1 1 0 1H14v1.5a.5.5 0 1 1-1 0V13h-1.5a.5.5 0 0 1 0-1H13v-1.5a.5.5 0 0 1 .5-.5z"></path>
                        </svg>
                        <span class="small ps-1">新建文件夹</span>
                    </a>
                </div>
                {% include 'backend/modal/modal_add_folder.html' %}
                <div class="portlet-body scrollable-horizontal scrollable-dark">
                    <ul class="list-unstyled px-1 my-0">
                        {% recursetree nodes %}
                            <li>
                                {% if not node.is_leaf_node %}
                                    <details open="">
                                        <summary class="{% if node.current_path %}text-primary{% endif %}">
                                            <svg class="me-1" width="16px" height="16px" viewBox="0 0 16 16"
                                                 xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                                <path fill-rule="evenodd"
                                                      d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14V3.5zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5V6zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7H1.633z"></path>
                                            </svg>
                                            <a href="{% url 'article:article' %}?path={{ node.path }}"
                                               class="link-normal folder-path {% if node.current_path %}text-primary{% endif %}"
                                            >{{ node.name }}</a>
                                        </summary>
                                        {% if not node.is_leaf_node %}
                                            <ul class="list-unstyled px-4">
                                                {{ children }}
                                            </ul>
                                        {% endif %}
                                    </details>
                                {% else %}
                                    <svg class="me-1 {% if node.current_path %}text-primary{% endif %}" width="16px"
                                         height="16px" viewBox="0 0 16 16"
                                         xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                        <path fill-rule="evenodd"
                                              d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14V3.5zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5V6zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7H1.633z"></path>
                                    </svg>
                                    <a href="{% url 'article:article' %}?path={{ node.path }}"
                                       class="link-normal folder-path {% if node.current_path %}text-primary{% endif %}"
                                    >{{ node.name }}</a>
                                {% endif %}
                            </li>
                        {% endrecursetree %}
                    </ul>
                </div>
            </div>
        </div>

        <!-- files -->
        <div class="col">
            <div class="portlet border-0 h-100">
                <div class="portlet-body p-4">
                    <!-- toolbar -->
                    <div class="mb-3 pb-4 pt-1 border-bottom">
                        <a data-bs-toggle="modal" data-bs-target="#modalAddArticle" class="ms-0 link-muted text-center">
                            <svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                 class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"></path>
                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"></path>
                            </svg>
                            <span class="small ps-1">新建文章</span>
                        </a>
                    </div>
                    {% include 'backend/modal/modal_add_article.html' %}

                    <!-- file list -->
                    <ul class="list-group list-group-flush">

                        <!-- item -->
                        {% for article in articles %}
                            <li class="list-group-item border-light px-0">
                                <div class="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <img width="40" height="40"
                                             src="https://smarty.stepofweb.com/5.0.0/html_frontend/demo.files/svg/icons/files/csv.svg"
                                             alt="...">
                                    </div>
                                    <div class="col">
                                        <a class="text-decoration-none link-normal"
                                           href="{% url 'article:article-detail' article.id %}">{{ article.title }}</a>
                                        <ul class="list-inline small">
                                            <li class="list-inline-item text-muted">{{ article.created|date:'Y-m-s' }}</li>
                                            <li class="list-inline-item {% if article.status == 1 %}text-success{% elif article.status == 0 %}text-danger{% elif article.status == 2 %}text-primary{% endif %}">
                                                {{ article.get_status_display }}
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-auto dropdown">
                                        <a class="btn btn-sm btn-light btn-ghost btn-soft btn-icon text-muted rounded-circle dropdown-toggle"
                                           href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"
                                           data-bs-offset="0,6">
                            <span class="group-icon">
                              <svg height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                                   fill="currentColor"><path fill-rule="evenodd"
                                                             d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path></svg>
                              <svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24"
                                   fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                   stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6"
                                                                                                            y1="6"
                                                                                                            x2="18"
                                                                                                            y2="18"></line></svg>
                            </span>
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-clean">
                                            <li {% if article.status == 1 or article.status == 2 %}
                                                hidden
                                            {% endif %} >
                                                <a class="dropdown-item"
                                                   onclick="changeArticleStatus(1, {{ article.id }})">
                                                    <svg class="text-gray-600" width="18px" height="18px"
                                                         xmlns="http://www.w3.org/2000/svg" fill="none"
                                                         viewBox="0 0 24 24"
                                                         stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              stroke-width="2"
                                                              d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                                                    </svg>
                                                    <span>发布</span>
                                                </a>
                                            </li>
                                            <li {% if article.status == 0 %}
                                                hidden
                                            {% endif %} >
                                                <a class="dropdown-item"
                                                   onclick="changeArticleStatus(0, {{ article.id }})">
                                                    <svg class="text-gray-600" width="18px" height="18px"
                                                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                         fill="none"
                                                         stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                         stroke-linejoin="round">
                                                        <path d="M12 20h9"></path>
                                                        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                                    </svg>
                                                    <span>取消发布</span>
                                                </a>
                                            </li>
                                            <li {% if article.status == 2 or article.status == 0 %}
                                                hidden
                                            {% endif %} >
                                                <a class="dropdown-item"
                                                   onclick="changeArticleStatus(2, {{ article.id }})">
                                                    <svg class="text-gray-600" width="18px" height="18px"
                                                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                         fill="none"
                                                         stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                         stroke-linejoin="round">
                                                        <path d="M12 20h9"></path>
                                                        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                                    </svg>
                                                    <span>共享(其他人均可见)</span>
                                                </a>
                                            </li>

                                            <li class="dropdown-divider"></li>
                                            <li>
                                                <a class="dropdown-item"
                                                   onclick="deleteArticle({{ article.id }})">
                                                    <svg class="text-danger" width="18px" height="18px"
                                                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                         fill="none"
                                                         stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                         stroke-linejoin="round">
                                                        <polyline points="3 6 5 6 21 6"></polyline>
                                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                        <line x1="10" y1="11" x2="10" y2="17"></line>
                                                        <line x1="14" y1="11" x2="14" y2="17"></line>
                                                    </svg>
                                                    <span class="w-100">Delete</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        {% endfor %}

                        <!-- end item -->
                    </ul>

                </div>
            </div>

        </div>

    </div>
{% endblock %}
{% block selectedItems %}

{% endblock %}

{% block javaScripts %}
    {{ block.super }}
    <script src="{% static 'js/form_validate.js' %}"></script>
    <script>

        function changeArticleStatus(status, article_id) {
            $.ajax({
                url: "{% url 'api-articles:article-change-status' 0  %}".replace(/0/, article_id),
                type: 'PATCH',
                data: {status: status},
                success: function (res) {
                    console.log(res)
                    $.SOW.core.toast.show('success', '', '操作成功', 'top-center', 10000, true);
                    location.reload() // 刷新当前页面
                },
                error: function (jqXHR) {
                    ajax_error(jqXHR, 'article')
                }
            })

        }

        function deleteArticle(article_id) {
            $.ajax({
                url: "{% url 'api-articles:article-detail' 0  %}".replace(/0/, article_id),
                type: 'DELETE',
                data: {status: status},
                success: function (res) {
                    $.SOW.core.toast.show('success', '', '删除成功', 'top-center', 10000, true);
                    location.reload() // 刷新当前页面
                },
                error: function (jqXHR) {
                    ajax_error(jqXHR, 'article')
                }
            })
        }

        function addFolderModal(path) {
            $('#modalAddFoler').modal('show')
        }
    </script>
{% endblock %}